<template>
  <div class="chat-container">
    <Page
      auto-content-height
      class="chat-page"
      content-class="rounded-lg"
      footer-class="bg-slate-400"
    >
      <!-- 布局 -->
      <div class="chat-layout">
        <!-- 左侧客服 -->
        <ChatSidebar ref="chatSidebarRef" class="chat-sidebar" />
        <!-- 右侧聊天窗口 -->
        <ChatMain
          ref="ChatMainRef"
          class="chat-main"
          @trigger-data-top="handleTriggerDataTop"
        />
      </div>
    </Page>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { ChatMain, ChatSidebar } from './components/index';
// 获取ChatSidebar组件引用
const chatSidebarRef = ref();
const ChatMainRef = ref();
// 处理触发dataTop方法
const handleTriggerDataTop = (data?: any) => {
  // 调用ChatSidebar中conversationsListRef的dataTop方法
  if (chatSidebarRef.value?.conversationsListRef) {
    // 客户列表数据置顶
    chatSidebarRef.value.conversationsListRef.dataTop(data || []);
  }
};
</script>

<style lang="scss" scoped>
//兼容小屏幕
@media (max-width: 768px) {
  //允许块元素换行并设置高度
  .chat-layout {
    flex-wrap: wrap !important;
    height: 200px !important;
  }
}

.chat-container {
  overflow-y: auto;
}

// 主页面样式
.chat-page {
  margin: 16px;
  background-color: hsl(var(--card));
  border-radius: 10px;
}

.chat-role-title {
  width: 80px;
}

.chat-role {
  display: flex;
  align-items: center;
  width: 200px;
  margin-bottom: 10px;
}
// 聊天布局容器
.chat-layout {
  display: flex;
  height: 1100px;
  margin-top: 20px;
}

// 左侧边栏样式
.chat-sidebar {
  margin-right: 1rem;
  overflow: hidden;
  border: 1px solid var(--bg-card-color);
  border-radius: 20px;
}

// 右侧主聊天区域
.chat-main {
  flex: 1 1 auto;
  // margin-top: 0.5rem;
  // background: url('https://videos.openai.com/vg-assets/assets%2Ftask_01jy3gafe1fvyvcw7fvbpemgme%2F1750317052_img_1.webp?st=2025-06-19T05%3A58%3A51Z&se=2025-06-25T06%3A58%3A51Z&sks=b&skt=2025-06-19T05%3A58%3A51Z&ske=2025-06-25T06%3A58%3A51Z&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skoid=3d249c53-07fa-4ba4-9b65-0bf8eb4ea46a&skv=2019-02-02&sv=2018-11-09&sr=b&sp=r&spr=https%2Chttp&sig=zfBgi09SsKNa%2F5jLIpawt8LIwerRe1dqqAMm0JpaYtE%3D&az=oaivgprodscus') !important;
  // background-repeat: no-repeat !important;
  // background-size: 100% 100% !important; /* 关键修改 */
}

.bg-background-deep {
  background-color: var(--background-deep) !important;
} // 根容器样式
</style>
